﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../Content/Site.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery/jquery-1.11.0.min.js"></script>
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <script src="../../../Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
    <script src="../../../Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.updateColumn.js"></script>
    <script src="jeasyui.extensions.datagrid.editors.full.js"></script>
    <script>
        $(function () {
            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'ID', title: '主键', width: 100 });
                c1.push({
                    field: 'AreaName', title: '地区', width: 150, fixable: true,
                    formatter: function (val) { return "<b>" + val + "</b>"; },
                    editor: {
                        type: "textbox"
                    }
                });
                c1.push({ field: 'Sex1', title: '男', width: 90, fixable: true });
                c1.push({ field: 'Sex2', title: '女', width: 90, fixable: true });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var normal00000 = [
                    { field: 'TS1', title: '测试1', width: 60 },
                    { field: 'TS2', title: '测试2', width: 60 }
                ];
                result.push(normal00000);

                return result;
            };
            var options = {
                title: "列表",
                idField: "ID",
                rownumbers: true,
                fit: true,
                border: false,
                singleSelect: true,
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-common-data.json",
                columnFixedOffset: 5,
                columnMinWidth: 50,
                columnMaxWidth: 500,
                onDblClickRow: function (rowIndex, row) {
                    $(this).datagrid("beginEdit", rowIndex);
                },
                onBeginEdit: function (rowIndex, row) {
                    //获取所有列中“fixable为true”的列，该属性表示“允许自动修复宽度”
                    var thisArg = this, t = $(thisArg), opts = t.datagrid("options");
                    var columnOpts = $(thisArg).datagrid("getColumnOptions", "all").filter(function (item) { return item.fixable; });

                    //获取这些列的编辑器
                    $.each(columnOpts, function (i, colOpt) {
                        if (!colOpt.field || !colOpt.editor) { return; }
                        var ed = t.datagrid("getEditor", { field: colOpt.field, index: rowIndex });
                        if (!ed) { return; }
                        var lastInput;
                        if (ed.actions && ed.actions.input) {
                            lastInput = ed.actions.input(ed.target[0]);
                        } else {
                            lastInput = ed.target;
                        }
                        lastInput.keyup(function (e) {
                            var len = $(this).val().replace(/[^\x00-\xff]/g, "**").length;
                            //重新获取该列（除此rowIndex之外的）最大长度，若当前长度大于最大长度，则更新
                            var data = t.datagrid("getRows");
                            var hasFormatter = $.isFunction(colOpt.formatter);
                            //console.log("当前索引：" + rowIndex);
                            //console.log("当前内容长度：" + len);
                            var colData = $.array.map(data, function (item) {
                                var theIndex = t.datagrid("getRowIndex", item);
                                if (rowIndex == theIndex) { return 0; }
                                //若该索引行数据正在被编辑，则取编辑器中的值
                                var edItem = t.datagrid("getEditor", { field: colOpt.field, index: theIndex });
                                if (edItem) {
                                    var lastInputItem;
                                    if (edItem.actions && edItem.actions.input) {
                                        lastInputItem = edItem.actions.input(edItem.target[0]);
                                    } else {
                                        lastInputItem = edItem.target;
                                    }
                                    return lastInputItem.val().replace(/[^\x00-\xff]/g, "**").length;
                                }
                                
                                return $(hasFormatter ? colOpt.formatter.call(thisArg, item[colOpt.field], item, theIndex) : item[colOpt.field]).text().replace(/[^\x00-\xff]/g, "**").length;
                            });
                            //console.log("除此索引之外其他此列单元格的长度：");
                            //console.log(colData);
                            var maxLen = $.array.max(colData);
                            //console.log("最大长度：");
                            //console.log(maxLen);
                            if (len > maxLen) {
                                var width = len * 10 + opts.columnFixedOffset;
                                if (width < opts.columnMinWidth) { width = opts.columnMinWidth; }
                                if (width > opts.columnMaxWidth) { width = opts.columnMaxWidth; }

                                t.datagrid("setColumnWidth", { field: colOpt.field, width: width });
                            }
                        });
                    });
                },
                onLoadSuccess: function (data) {
                    //获取所有列中“fixable为true”的列，该属性表示“允许自动修复宽度”
                    var thisArg = this, t = $(thisArg), opts = t.datagrid("options");
                    var columnOpts = $(thisArg).datagrid("getColumnOptions", "all").filter(function (item) { return item.fixable; });
                    //console.log(columnOpts);
                    //获取每个列的数据中，最长的那条
                    var columnMaxLength = {};
                    $.each(columnOpts, function (i, colOpt) {
                        if (!colOpt.field) { return; }
                        var hasFormatter = $.isFunction(colOpt.formatter);
                        var colData = $.array.map(data.rows, function (item) { return $(hasFormatter ? colOpt.formatter.call(thisArg, item[colOpt.field], item, t.datagrid("getRowIndex", item)) : item[colOpt.field]).text().replace(/[^\x00-\xff]/g, "**").length; });
                        //console.log(colData);
                        var maxLength = $.array.max(colData);
                        //console.log(maxLength);
                        columnMaxLength[colOpt.field] = maxLength;
                    });
                    //console.log(columnMaxLength);
                    //去修改列宽
                    for (var c in columnMaxLength) {
                        var width = columnMaxLength[c] * 10 + opts.columnFixedOffset;
                        if (width < opts.columnMinWidth) { width = opts.columnMinWidth; }
                        if (width > opts.columnMaxWidth) { width = opts.columnMaxWidth; }
                        t.datagrid("setColumnWidth", { field: c, width: width });
                    }
                }
            };

            $("#dg1").datagrid(options);


        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false">
        <table id="dg1"></table>
    </div>
</body>
</html>
